<template>
	<view>
		<view class="tab">
			<view :class="activeTab === '1' && 'active'" @click="activeTab = '1'">
				{{tabOneName }}
				<view class="line"> </view>
				<!-- <image class="bgImg" :src='serverImageUrl("/static/images/com/customerSearch/tabLeft.png")'></image> -->
			</view>
			<view :class="activeTab === '2' && 'active'" @click="activeTab = '2'" v-if="tabTwoName">
				{{ tabTwoName }}
				<view class="line"> </view>
				<!-- <image class="bgImg" :src='serverImageUrl("/static/images/com/customerSearch/tabRight.png")'></image> -->
			</view>
		</view>
		<view class="searchContent">
			<u-form :model="searchForm" ref="uForm" label-position="top">
				<u-form-item :border-bottom="false" :label="$t('关键词')+':'" prop="name" v-if="activeTab === '2'">
					<u-input border :placeholder="$t('请输入搜索关键词')" v-model="searchForm.name" />
				</u-form-item>
				<u-form-item :border-bottom="false" :label="$t('所在区域')+':'" prop="city">
					<u-radio-group active-color="#ff4a17" v-model="searchForm.city">
						<u-radio name="0">
							<image class="radioCity" :src='serverImageUrl("/static/images/index/huangjin.png")'>
							</image>
						</u-radio>
						<u-radio name="1">
							<image class="radioCity" :src='serverImageUrl("/static/images/index/huangji.png")'>
							</image>
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="cityText">
					<u-input border v-model="searchForm.cityText" :placeholder="$t('请选择')" disabled
						@click="showCity = true" :custom-style="myStyle" />
				</u-form-item>
				<u-form-item :border-bottom="false" :label="$t('主营业务')+':'" prop="main_business">
					<u-input border v-model="searchForm.main_business" :placeholder="$t('请选择')" />
				</u-form-item>
			</u-form>
			<view class="searchSetting">
				<view>
					<view class="u-margin-bottom-15">{{$t("去重搜索")}}</view>
					<view>
						<u-switch active-color="#ff7348" v-model="repeat"></u-switch>
					</view>
				</view>
				<view class="u-text-right">
					<view class="u-margin-bottom-15">{{$t("搜索条数")}}</view>
					<picker @change="searchNumPickerChange" :value="searchNumIndex" :range="searchNumArr">
						<view class="uni-input">{{searchNumArr[searchNumIndex]}} ></view>
					</picker>
				</view>
			</view>
			<view class="searchBtn u-margin-top-30 u-margin-bottom-20">
				<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="searchFun">
					{{$t("查找企业")}}
				</u-button>
			</view>
		</view>
		<SelectCity :is_register="1" :is_port="true" v-model="showCity" @change="confirm"
			:select_city_new="select_city_new" :select_city_newd="[]">
		</SelectCity>
	</view>
</template>

<script>
	import app from '@/main'
	import SelectCity from "@/components/page/SelectCityNew.vue"
	export default {
		components: {
			SelectCity
		},
		props: {
			tabOneName: {
				type: String,
				default () {
					return app.$i18n.t('范围查找')
				}
			},
			tabTwoName: {
				type: String | null,
				default () {
					return app.$i18n.t('精确查找')
				}
			}
		},
		data() {
			return {
				customStyle: {
					padding: '20rpx',
					maxWidth: '600rpx',
					minWidth: '200rpx',
					height: '78rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				activeTab: '1', //1 范围 2 精确
				searchForm: {
					name: '',
					city: '0',
					cityText: '',
					main_business: '' //主营
				},
				showCity: false,
				select_city_new: [],
				repeat: false, //是否去重
				searchNumIndex: 0, //搜索条数
				searchNumArr: [100, 200, 300, 500],
			};
		},
		methods: {
			searchNumPickerChange(e) {
				this.searchNumIndex = e.detail.value
			},
			confirm(e) {
				const text = e.map(item => item.label).join(",");
				this.$set(this.searchForm, 'cityText', text)
			},
			searchFun() {
				if (this.activeTab === '1') {
					//如果是范围查找删除关键词搜索字段
					delete this.searchForm.name
				}
				this.$emit("search", {
					...this.searchForm,
					searchNum: this.searchNumArr[this.searchNumIndex],
					repeat: this.repeat,
					activeTab: this.activeTab
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;

		&>view {
			flex: 1;
			position: relative;
			z-index: 1;
			height: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.bgImg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				display: none;
			}

			.line {
				width: 30%;
				height: 5rpx;
				background-color: #ff4b17;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 5rpx;
				opacity: 0;
			}

			&.active {
				color: #000;

				.line {
					opacity: 1;
				}

				.bgImg {
					display: block;
				}
			}
		}
	}

	.searchContent {
		background-color: #fff;
		padding: 15rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		box-shadow: 0rpx 10rpx 20rpx #eee;

		.searchSetting {
			display: flex;
			justify-content: space-between;
			color: #666666;
			font-size: 24rpx;
			align-items: center;
			margin-top: 15rpx;

		}

		.radioCity {
			height: 43.6rpx;
			width: 64.53rpx;
			vertical-align: middle;
			margin-right: 20rpx;
			margin-left: 10rpx;
		}
	}
</style>